import React, { useRef } from "react";
import { Form, Input, Button } from "antd";
import { UserOutlined, LockOutlined } from "@ant-design/icons";
import { Link, useNavigate } from "react-router-dom";

// 导入样式
import "../entrance.scss";

import { IUserLoginReq } from "types/userReq";
import * as userService from "services/user";


export default function Login() {
  const [form] = Form.useForm();
  const loginRef = useRef(form);

  // 调用登录API
  const login = function (data: IUserLoginReq) {
    
  };

  // 登录按钮的响应函数
  const onFinish = function (data: IUserLoginReq) {
    login(data);
  };

  return (
    <div className="entrance-page">
      {/* 页面内容(登录表单) */}
      <div className="login entrance-content">
        <div className="form">
          <Form name="normal_login" onFinish={onFinish} ref={loginRef}>
            <p className="form-title">登录</p>
            <Form.Item
              name="account"
              rules={[{ required: true, message: "请输入用户名" }]}
            >
              <Input
                placeholder="请输入用户名"
                className="form-input"
                prefix={<UserOutlined />}
              />
            </Form.Item>

            <Form.Item
              name="pwd"
              rules={[{ required: true, message: "请输入密码" }]}
            >
              <Input
                prefix={<LockOutlined />}
                type="password"
                placeholder="请输入密码"
                className="form-input"
              />
            </Form.Item>

            <Form.Item>
              <Link className="LinkToRegister" to="/register">
                尚未注册
              </Link>
            </Form.Item>

            <Form.Item>
              <Button type="primary" htmlType="submit" className="form-button">
                登录
              </Button>
            </Form.Item>
          </Form>
        </div>
      </div>
    </div>
  );
}
